<template>
    <!--后台管理首页-->
    <div class="index-wrapper">
       <el-row :gutter="20">
           <el-col :span="6">
               <el-card shadow="never">
                   <div slot="header" class="index-card-title flex" style="justify-content: space-between;">
                       <span>新增用户</span>
                       <div>
                           <el-tag type="success">今日</el-tag>
                       </div>
                   </div>

                   <div class="index-card-body">
                       <countTo class="number" :startVal='0' :endVal='1587' :duration='2500'></countTo>

                       <div style="font-size: 14px;margin-top: 12px;margin-bottom: 24px;" class="flex">
                           <div style="margin-right: 12px;">日环比 198.14% <i style="color: red;" class="el-icon-caret-top"></i></div>
                           <div>周环比 875.39% <i style="color: red;" class="el-icon-caret-top"></i></div>
                       </div>

                       <div>
                           <el-divider class="my-divider" />
                       </div>

                        <div class="flex" style="justify-content: space-between;color: #515a6e;font-size: 14px;">
                            <div>昨日新增用户</div>
                            <div>1576 人</div>
                        </div>

                   </div>
               </el-card>
           </el-col>

           <el-col :span="6">
               <el-card shadow="never">
                   <div slot="header" class="index-card-title flex" style="justify-content: space-between;">
                       <span>新增公共场所</span>
                       <div>
                           <el-tag type="success">今日</el-tag>
                       </div>
                   </div>

                   <div class="index-card-body">
                       <countTo class="number" :startVal='0' :endVal='654' :duration='2500'></countTo>

                       <div style="font-size: 14px;margin-top: 12px;margin-bottom: 24px;" class="flex">
                           <div style="margin-right: 12px;">日环比 102.97% <i style="color: red;" class="el-icon-caret-top"></i></div>
                           <div>周环比 569.48% <i style="color: red;" class="el-icon-caret-top"></i></div>
                       </div>

                       <div>
                           <el-divider class="my-divider" />
                       </div>

                       <div class="flex" style="justify-content: space-between;color: #515a6e;font-size: 14px;">
                           <div>昨日新增公共场所</div>
                           <div>511 个</div>
                       </div>

                   </div>
               </el-card>
           </el-col>

           <el-col :span="6">
               <el-card shadow="never">
                   <div slot="header" class="index-card-title">
                       <span>总用户量</span>
                   </div>

                   <div class="index-card-body">
                       <countTo class="number" :startVal='0' :endVal='userStatData.total' :duration='2500'></countTo>

                       <div style="font-size: 14px;margin-top: 12px;margin-bottom: 24px;" class="flex">
                           <div style="margin-right: 12px;">日环比 {{userStatData.rhb}}% <i style="color: red;" class="el-icon-caret-top"></i></div>
                           <div>周环比 {{userStatData.zhb}}% <i style="color: red;" class="el-icon-caret-top"></i></div>
                       </div>

                       <div>
                           <el-divider class="my-divider" />
                       </div>

                       <div class="flex" style="justify-content: space-between;color: #515a6e;font-size: 14px;">
                           <div>本月新增用户</div>
                           <div>{{userStatData.monthNewly}} 人</div>
                       </div>

                   </div>
               </el-card>
           </el-col>

           <el-col :span="6">
               <el-card shadow="never">
                   <div slot="header" class="index-card-title">
                       <span>总公共场所</span>
                   </div>

                   <div class="index-card-body">
                       <countTo class="number" :startVal='0' :endVal='placeStatData.total' :duration='2500'></countTo>

                       <div style="font-size: 14px;margin-top: 12px;margin-bottom: 24px;" class="flex">
                           <div style="margin-right: 12px;">日环比 {{placeStatData.rhb}}% <i style="color: red;" class="el-icon-caret-top"></i></div>
                           <div>周环比 {{placeStatData.zhb}}% <i style="color: red;" class="el-icon-caret-top"></i></div>
                       </div>

                       <div>
                           <el-divider class="my-divider" />
                       </div>

                       <div class="flex" style="justify-content: space-between;color: #515a6e;font-size: 14px;">
                           <div>本月新增公共场所</div>
                           <div>{{placeStatData.monthNewly}} 个</div>
                       </div>

                   </div>
               </el-card>
           </el-col>
       </el-row>

        <!--快捷入口-->
        <el-row :gutter="20" class="entry-box">
            <el-col
                :span="3"
                v-for="item in entryList"
            >
                <div class="entry-item" @click="onClickEntryItem(item)">
                    <div class="icon"><i :class="item.icon" :style="{'color': item.color}"></i></div>
                    <div class="title">{{item.title}}</div>
                </div>
            </el-col>
        </el-row>

        <!--项目介绍 可以删除-->
        <el-col :span="24" style="margin: 12px 0;">
            <ProjectInfo />
        </el-col>
        <!--项目介绍 end-->

        <el-card shadow="never" class="full-card" style="margin-top: 12px;height: 340px;">
            <div slot="header" class="index-card-title">
                <span>健康码访问量</span>
            </div>
            <CodeReqChart />
        </el-card>

        <el-row :gutter="20" style="margin-top: 12px;">
            <el-col :span="16">
                <el-card shadow="never" class="full-card" style="height: 300px;">
                    <div slot="header" class="index-card-title">
                        <span>注册用户</span>
                    </div>
                    <RegUserChart />
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="never" class="full-card" style="height: 300px;">
                    <div slot="header" class="index-card-title">
                        <span>用户健康码分布</span>
                    </div>
                    <HealthStateChart />
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import countTo from 'vue-count-to';
    import CodeReqChart from './charts/CodeReqChart';
    import RegUserChart from './charts/RegUserChart';
    import HealthStateChart from './charts/HealthStateChart';

    import ProjectInfo from './projectInfo';

    export default {
        name: "index",
        components: {
            ProjectInfo,
            countTo, CodeReqChart, RegUserChart, HealthStateChart
        },
        data() {
            return {
                // 用户总量
                userStatData: {
                    total: 0,
                    monthNewly: 0,
                    rhb: 0.0,
                    zhb: 0.0,
                },
                // 总公共场所
                placeStatData: {
                    total: 0,
                    monthNewly: 0,
                    rhb: 0.0,
                    zhb: 0.0,
                },

                entryList: [
                    { title: '大数据平台', newPage: true, path: '/dataView', icon: 'el-icon-data-line', color: 'rgb(255, 156, 110)' },
                    { title: '用户管理', path: '/apoUser', icon: 'el-icon-user-solid', color: 'rgb(105, 192, 255)' },
                    { title: '公共场所', path: '/codePlace', icon: 'el-icon-office-building', color: 'rgb(92, 219, 211)' },
                    { title: '系统设置', icon: 'el-icon-s-tools', color: 'rgb(149, 222, 100)' },
                ],
            }
        },
        created() {
            this.loadStatData();
        },
        methods: {
            // 加载统计数据
            async loadStatData(){
                // 总用户量
                let userCountRes = await this.$api.indexStat.userStatData();
                this.userStatData = userCountRes.data;
                // 总公共场所
                let placeCountRes = await this.$api.indexStat.placeStatData();
                this.placeStatData = placeCountRes.data;
            },
            /**
             * 点击快速入口
             */
            onClickEntryItem(item){
                let path = item.path;
                let meta = item;
                if (!path) {
                    this.$message.success("开发中...");
                    return;
                }
                // 新窗口打开
                if (meta && meta.newPage === true) {
                    if (path.startsWith('http')) {
                        window.open(path, "_blank");
                        return;
                    }
                    // 解析路由
                    let resRoute = this.$router.resolve({
                        path: path
                    });
                    console.log("解析路由：", resRoute);
                    window.open(resRoute.href, "_blank");
                } else {
                    this.$router.push(path);
                }
            },
        },
    }
</script>

<style scoped>
    .index-wrapper {
        padding: 12px;
    }

    .index-card-title{

    }
    .index-card-title > span{
        font-size: 14px;
        color: #17233d;
        font-weight: 700;
    }

    .index-card-body .number{
        font-size: 30px;
        color: #17233d;
    }

    .entry-box{
        margin-top: 12px;
    }
    .entry-item{
        background-color: white;
        border-radius: 12px;
        padding: 16px;
        text-align: center;
        cursor: pointer;
        transition: all .2S;
    }
    .entry-item:hover{
        box-shadow: 0 1px 6px 2px rgba(0,0,0,.1);
    }
    .entry-item > .icon{
        font-size: 32px;
    }
    .entry-item > .title{
        font-size: 14px;
        margin-top: 6px;
    }
</style>
